<template>
  <div>
    <div class="backgroudImage" />
    <div class="body">
      <el-button class="prepage" type="primary" @click="goindex" icon="el-icon-arrow-left">上一页</el-button>
      <div class="Picandtext">
        <img
          :src="Item.museumimg"
          alt=""
          style="height: 300px; width: 300px"
        />
        <div class="text">
          <div style="display: flex; flex-direction: row">
            <h1 class="name">{{Item.museumname}}</h1>
            <button
              style="
                height: 30px;
                margin-top: 30px;
                margin-left: 20px;
                background-color: #ff2d2d;
                border-radius: 3px;
              "
            >
              收&nbsp;&nbsp;藏
            </button>
          </div>
          <span style="margin-top: -20px; color: #c24e45; text-align: left"
            >{{Item.museumlocal}}</span
          >
          <span style="text-align: left; color: #c24e45"
            >{{Item.museumtime}}</span
          >
          <div class="detail_text">
            {{Item.museumdetail}}
          </div>
        </div>
      </div>

      <div class="LocalandMap">
        <div class="local">
          <div class="de">
            <span style="color: #ae0000">博物馆地址：</span>
            <span>{{Item.museumlocal}}</span>
          </div>
          <div class="de">
            <span style="color: #ae0000">公交路线：</span>
            <span
              >{{Bus}}</span
            >
          </div>
          <div class="de">
            <span style="color: #ae0000">地铁路线：</span>
            <span>{{Under}}</span>
          </div>
        </div>
        <baidu-map
          :scroll-wheel-zoom="true"
          :center="center"
          :zoom="zoom"
          @ready="handler"
          ak="zACgQjvDOYGuGURyVtqccUUkrbQFGU4P"
          style="width: 50%; height: 300px; margin-left: 100px"
        >
          <bm-marker
            :position="{ lng: Lng, lat: Lat }"
            :dragging="false"
            animation="BMAP_ANIMATION_BOUNCE"
          >
            <bm-label
              :content="Item.museumname"
              :labelStyle="{ color: 'red', fontSize: '3px' }"
              :offset="{ width: -35, height: 30 }"
            />
          </bm-marker>
          <bm-scale anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-scale>
        </baidu-map>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tabs: [{ name: "详情" }, { name: "展览" }, { name: "藏品" }],
      center: { lng: 0, lat: 0 },
      Lng:"",
      Lat:"",
      zoom: 3,
      Bus:"",
      Under:"",
      Item:[],
      Bus:"",
      Under:"",
    };
  },

  methods: {
    handler({ BMap, map }) {
      console.log(BMap,map);
      console.info(this.Lng,this.Lat);
      this.center.lng = this.Lng;
      this.center.lat = this.Lat;
      this.zoom = 15;
    },

    refresh(){

    },

    goindex(){
      this.$router.replace('/Index');
      this.$router.go(0);
    }
  },

  beforeCreate() {
    let local = this.$route.params.museumItem.data[0].museumname;
    console.info(local);
    this.$http
      .get(
        "baiduApi/geocoding/v3/?address="+local+"&output=json&ak=zACgQjvDOYGuGURyVtqccUUkrbQFGU4P"
      )
      .then((res) => {
        this.Lng = res.data.result.location.lng;
        this.Lat = res.data.result.location.lat;
        console.log(res);
      });
  },

  mounted () {
    let result = this.$route.params.museumItem.data[0];
    this.Item = result;
    let item = this.Item;
    let arr = item.museumtraffic;
    let list = arr.split("\n");
    this.Bus = list[0];
    this.Under = list[2];
  }
};
</script>

<style>
.backgroudImage {
  width: 100%;
  height: 100%;
  position: absolute;
  background-color: rgba(224, 224, 224, 0.3);
  z-index: -2;
}

.body {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 2;
  margin-top: 30px;
}

.body .prepage{
  width: 100px;
}

.body .Picandtext {
  flex: right;
  display: flex;
  flex-direction: row;
  width: 80%;
  margin-left: 200px;
}

.body .Picandtext .text {
  display: flex;
  flex-direction: column;
  margin-left: 80px;
  width: 90%;
}

.body .Picandtext .text .name {
}

.body .Picandtext .text .detail_text {
  max-height: 40%;
  overflow-y: auto;
  margin-top: 20px;
  width: 90%;
  margin-left: 20px;
}

.body .LocalandMap {
  display: flex;
  flex-direction: row;
}

.body .LocalandMap .local {
  width: 20%;
  overflow-y: auto;
  margin-left: 200px;
  margin-top: 30px;
}

.body .LocalandMap .Map {
  width: 50%;
  height: 500px;
}

.body .LocalandMap .Map .map {
  width: 100%;
  height: 300px;
}

.de {
  margin-top: 10px;
}
</style>